<template>
  <n-drawer v-model:show="isDrawer" :width="width" :auto-focus="false" @after-leave="handleReset">
    <n-drawer-content :title="title" closable> 
      <n-tabs type="line" size="large">
        <n-tab-pane name="basic" tab="普通充电宝" v-if="formParams3.powerbank == 1">
          <n-form
            :model="formParams"
            :rules="rules"
            ref="formRef"
            label-placement="left"
            :label-width="120"
          >
            <n-form-item label="属性" path="attr">
              <n-radio-group v-model:value="formParams.attr" name="attr" @update:value="attrChange1" >
                <n-space>
                  <n-radio :key="1" :value="1">分钟</n-radio>
                  <n-radio :key="2" :value="2">小时</n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>

            <n-form-item label="计费标准" path="minute">
              <n-input placeholder="请输入" v-model:value="formParams.minute" />
              <div style="width: 170px;margin-left: 10px;">{{formParams.attr==1?'分钟':'小时'}}收费</div>
              <n-input placeholder="请输入金额" v-model:value="formParams.danjia" />
              <div style="margin-left: 10px;">元</div>
            </n-form-item>
            
            <n-form-item label="免费策略(几分钟内免费)" path="mianfei">
              <n-input placeholder="请输入分钟数" v-model:value="formParams.mianfei" />
            </n-form-item>

            <n-form-item label="封顶金额" path="maxmoney">
              <n-input placeholder="请输入封顶金额" v-model:value="formParams.maxmoney" />
            </n-form-item>

            <n-form-item label="每日最高消费" path="dayconsume">
              <n-input placeholder="请输入每日最高消费" v-model:value="formParams.dayconsume" />
            </n-form-item>
            <n-space>
              <n-button type="primary" :loading="subLoading" @click="formSubmit">修改</n-button>
            </n-space>
          </n-form>
        </n-tab-pane>
        
        <n-tab-pane name="safety" tab="快充充电宝" v-if="formParams3.powerbank == 1">
          <n-form
            :model="formParams1"
            :rules="rules1"
            ref="formRef1"
            label-placement="left"
            :label-width="120"
          >
            <n-form-item label="属性" path="attr">
              <n-radio-group v-model:value="formParams1.attr" name="attr" @update:value="attrChange2" >
                <n-space>
                  <n-radio :key="1" :value="1">分钟</n-radio>
                  <n-radio :key="2" :value="2">小时</n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>

            <n-form-item label="计费标准" path="minute">
              <n-input placeholder="请输入" v-model:value="formParams1.minute" />
              <div style="width: 170px;margin-left: 10px;">{{formParams1.attr==1?'分钟':'小时'}}收费</div>
              <n-input placeholder="请输入金额" v-model:value="formParams1.danjia" />
              <div style="margin-left: 10px;">元</div>
            </n-form-item>

            <n-form-item label="免费策略(几分钟内免费)" path="mianfei">
              <n-input placeholder="请输入分钟数" v-model:value="formParams1.mianfei" />
            </n-form-item>

            <n-form-item label="封顶金额" path="maxmoney">
              <n-input placeholder="请输入封顶金额" v-model:value="formParams1.maxmoney" />
            </n-form-item>

            <n-form-item label="每日最高消费" path="dayconsume">
              <n-input placeholder="请输入每日最高消费" v-model:value="formParams1.dayconsume" />
            </n-form-item>
            <n-space>
              <n-button type="primary" :loading="subLoading" @click="formSubmit1">修改</n-button>
            </n-space>
          </n-form>    
        </n-tab-pane>

        <n-tab-pane name="line" tab="充电线" v-if="formParams3.chargingline == 1">
          <n-form
            :model="formParams2"
            :rules="rules2"
            ref="formRef2"
            label-placement="left"
            :label-width="120"
          >
            <div class="top">
              <div class="left">
                <n-button type="info" @click="add">添加策略</n-button>
              </div>
            </div>
            <div class="center clearfix" v-for="(item,index) in List" :key="index">
              <n-form-item label="时间(小时)" path="time">
                <n-input placeholder="请输入" v-model:value="item.time" />
              </n-form-item>
              <n-form-item label="单价(元)" path="money">
                <n-input placeholder="请输入" v-model:value="item.money" />
              </n-form-item>
              <div class="right" @click="remove(index)">删除</div>
            </div>
            <n-space>
              <n-button type="primary" :loading="subLoading" @click="formSubmit2">保存</n-button>
            </n-space>
          </n-form>    
        </n-tab-pane>
      </n-tabs>
    </n-drawer-content>
  </n-drawer>
</template>

<script lang="ts" setup>
  import { ref, onMounted, computed, reactive, initCustomFormatter, inject } from 'vue';
  import { useMessage, FormRules } from 'naive-ui';
  import type { formParamsType } from './types';

  import { stationEdit,stationAdd,stationInfo,billinfo,stationbillEdit } from '@/api/device/station';
  

  import { useGlobSetting } from '@/hooks/setting';
  const globSetting = useGlobSetting();
  const { uploadUrl } = globSetting;

  const rules: FormRules = {
    minute: {
      required: true,
      message: '请输入计费标准',
      trigger: 'blur',
    },
    mianfei: {
      required: true,
      message: '请输入免费策略',
      trigger: 'blur',
    },
    maxmoney: {
      required: true,
      message: '请输入封顶金额',
      trigger: 'blur',
    },
    dayconsume: {
      required: true,
      message: '请输入每日最高消费',
      trigger: 'blur',
    }
  };

  const rules1: FormRules = { 
    minute: {
      required: true,
      message: '请输入计费标准',
      trigger: 'blur',
    },
    mianfei: {
      required: true,
      message: '请输入免费策略',
      trigger: 'blur',
    },
    maxmoney: {
      required: true,
      message: '请输入封顶金额',
      trigger: 'blur',
    },
    dayconsume: {
      required: true,
      message: '请输入每日最高消费',
      trigger: 'blur',
    }
  };

  const emit = defineEmits(['change']);
  const props = defineProps({
    title: {
      type: String,
      default: '计费策略',
    },
    width: {
      type: Number,
      default: 650,
    },
    roleList: {
      type: Array,
    },
  });

  const provinceSelect = ref([]);
  const sitepicture = ref([]);
  const defaultValueRef = () => ({
    id:null,
    minute: '',
    danjia: '',
    mianfei: '',
    maxmoney: '',
    dayconsume: '',
    stationid: null,
    ioio: 1,
    attr: 1,
  });

  const defaultValueRef1 = () => ({
    id:null,
    minute: '',
    danjia: '',
    mianfei: '',
    maxmoney: '',
    dayconsume: '',
    stationid:null,
    ioio:2,
    attr: 1,
  });

  const defaultValueRef3 = () => ({
    depositstatus: 1,
    powerbank: 1,
    chargingline: 1,
  });

  const List = ref([{
    time: '',
    money: '',
  }]);//默认显示方案详情
  const xqLIst = ref([{}]);//方案详情

  //新增详情
  function add(){
    List.value.push({
      time: '',
      money: ''
    });
  }
  //移除详情
  function remove(index){
    List.value.splice(index, 1);
  }

  function attrChange1(e){
    formParams.value.attr=e;
  }
  function attrChange2(e){
    formParams1.value.attr=e;
  }

  function formSubmit() {
    formRef.value.validate((errors) => {
      if (!errors) {
        const msg = '提交成功';
          stationbillEdit(formParams.value).then((_)=>{
            message.success(msg);
            emit('change');
            handleReset();
            closeDrawer();
          });
      } else {
        message.error('请填写完整信息');
      }
    });
  }

  function formSubmit1() {
    formRef1.value.validate((errors) => {
      if (!errors) {
        const msg = '提交成功';
          stationbillEdit(formParams1.value).then((_)=>{
            message.success(msg);
            emit('change');
            handleReset();
            closeDrawer();
          });
      } else {
        message.error('请填写完整信息');
      }
    });
  }

  function formSubmit2() {
    const msg = '保存成功';

    //追加添加详情
    xqLIst.value = [];
    for (var i = 0; i < List.value.length; i++) {
      if(List.value[i].time && List.value[i].money){
        xqLIst.value.push({
          time: List.value[i].time,
          money: List.value[i].money,
        });
      }
    }
    formParams.value.line_combo = JSON.stringify(xqLIst.value);
    
    stationbillEdit(formParams.value).then((_)=>{
      message.success(msg);
      emit('change');
      handleReset();
      closeDrawer();
    });
  }

  function getInfo() {
    //查询出来慢充和快充的计费规则
    billinfo({ id: formParams.value.id,id1:formParams1.value.id }).then((res) => {
      const params = {
        id: formParams.value.id,
        minute: res.maninfo.minute,
        danjia: res.maninfo.danjia,
        mianfei: res.maninfo.mianfei,
        maxmoney: res.maninfo.maxmoney,
        dayconsume: res.maninfo.dayconsume,
        attr: res.maninfo.attr,
      };

      formParams.value = Object.assign(formParams.value, params);

      const params1 = {
        id: formParams1.value.id,
        minute: res.kuaiinfo.minute,
        danjia: res.kuaiinfo.danjia,
        mianfei: res.kuaiinfo.mianfei,
        maxmoney: res.kuaiinfo.maxmoney,
        dayconsume: res.kuaiinfo.dayconsume,
        attr: res.maninfo.attr
      };

      formParams1.value = Object.assign(formParams1.value, params1);

      List.value = JSON.parse(res.maninfo.line_combo);

      isDrawer.value = true;
    });

    stationInfo({ id: formParams.value.stationid }).then((res) => {
      const params = {
        depositstatus: res.depositstatus,
        powerbank: res.powerbank,
        chargingline: res.chargingline,
      };
      
      formParams3.value = Object.assign(formParams3.value, params);
    });
  }

  const message = useMessage();
  const formRef: any = ref(null);
  const formRef1: any = ref(null);
  const isDrawer = ref(false);
  const subLoading = ref(false);
  const storeTypeAll = ref([]);
  const formParams = ref<formParamsType>(defaultValueRef());
  const formParams1 = ref<formParamsType>(defaultValueRef1());
  const formParams3 = ref<formParamsType>(defaultValueRef3());
  async function openDrawer(stationid,billingstatus?,kbillingstatus?) {
    formParams.value.id = billingstatus;
    formParams1.value.id = kbillingstatus;
    formParams.value.stationid = stationid;
    formParams1.value.stationid = stationid;

    getInfo();
    isDrawer.value = true;
  }

  function closeDrawer() {
    isDrawer.value = false;
  }

  function handleReset() {
    
  }

  onMounted(async () => {

  });

  defineExpose({
    openDrawer,
    closeDrawer,
  });
</script>
<style scoped>
  .top{
    height: 60px;
  }

  .top .left{
    float: left;
    width: 14%;
  }

  .clearfix:after {
		content: "020";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}

  .center .right{
    float: right;
    width: 76px;
    text-align: center;
    height: 34px;
    line-height: 34px;
    background: #ff4949;
    color: #fff;
    border-radius: 6px;
    margin-bottom: 20px;
  }
</style>
